<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="./js/dijit/themes/tundra/tundra.css"/>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div id="parent" style="width:854px;height:500px;background:#222222;overflow:hidden;">
            <div id="son" style="position:relative;width:200px;height:200px;background:#ff5555">
            </div>
        </div>
    </body>
</html>
<script src="./js/dojo/dojo.js">
</script>
<script type="text/javascript">
    
    dojo.ready(function(){
        dojo.query('#parent').connect('onclick', function(evt){
            console.log('parent');
            dumpEvtInfo(evt);
            //alert('parent') ;
            //evt.stopPropagation();
        });
        
        /*
         dojo.query('#son').connect('onclick',function(evt){
         //evt.stopPropagation();
         console.log('son clicked');
         dumpEvtInfo( evt );
         //alert('son') ;
         });
         dojo.query('#son').connect('onmouseout',function(evt){
         dumpEvtInfo( evt );
         });
         */
        function dumpEvtInfo(evt){
            console.log(evt.srcElement);
            console.log(dojo.byId(evt.target.id));
            console.log(dojo.byId(evt.currentTarget.id));
        }
        
        
        /**
         * subscribe
         *
         * returned value of subscribeId is array which can used to unsubscribe this bind
         *
         *
         * publish
         *
         * the handle's args shoube be a array,
         * and only arrar[0] be passed to the previous binded handled via subscribe function
         *
         *
         */
        var subscribeId = dojo.subscribe('blink', dojo.byId('son') /*null*/, function(){
            var args = arguments;
            console.log(args);
            //console.log('caption:' + caption.toString());
            //console.log('args:' + args.toString());
            //console.log(dojo.byId('son'));
            //var contentboxobj = dojo.contentBox(this);
            //console.log(++contentboxobj.w);
            console.log(this);
            dojo.attr('son', {
                style: {
                    left: (++dojo.marginBox(this.id).l > 400 ? 0 : dojo.marginBox(this.id).l) + 'px',
                    //width: args[0] +'px',
                    //height:args[0] + 'px',
                    background: 'RGB(' + args[0] + "," + args[1] + "," + args[2] + ')'
                },
            });
            console.log('subscribe done');
        });
        
        
        console.log(subscribeId);
        dojo.attr('son', {
            subId: subscribeId
        });
        dojo.query('#parent').connect('onclick', function(){
            //alert('fsda');
            console.log(subscribeId);
            dojo.unsubscribe(subscribeId);
        });
        
        //setInterval(blinkMe, 200);
        
        function blinkMe(){
            var randomInt = Math.floor(Math.random() * 100) + Math.floor(Math.random() * 10);
            var randomIntII = Math.floor(Math.random() * 100) + Math.floor(Math.random() * 10);
            var randomIntIII = Math.floor(Math.random() * 100) + Math.floor(Math.random() * 10);
            //console.log( randomInt );
            dojo.publish('blink', [randomInt, randomIntII, randomIntIII]);
        }
        
        
        /**
         * animate
         */
        dojo.ready(function(){
        
			console.log( dojo.byId('parent'));
			console.log(dojo.style('parent','width'));
			console.log( dojo.position('parent'));
            dojo.query('#son').connect('onclick', function(evt){
                dojo.animateProperty({
                    node: 'son',
                    properties: {
						opacity: {end :1.0,start:0},
						height:{end: 100,start:0 },
						left:dojo.contentBox('parent').w>>1 ,
						top:200,
                    }
                }).play();
            });
            
        });
        
        
        
    });
    
    
</script>
